<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
    <h1>表单控制之checkbox单选</h1>

    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="password"></p>
    <p><input type="checkbox" v-model="isCheck">记住密码</p>
    <p>
        <input type="radio" v-model="gender" value="1">男
        <input type="radio" v-model="gender" value="2">女
        <input type="radio" v-model="gender" value="0">未知
    </p>
    <p>爱好(多选)：</p>
    <p>
        <input type="checkbox" v-model="hobby" value="篮球"> 篮球
        <input type="checkbox" v-model="hobby" value="足球"> 足球
        <input type="checkbox" v-model="hobby" value="橄榄球"> 橄榄球
        <input type="checkbox" v-model="hobby" value="乒乓球"> 乒乓球
    </p>
    <hr>
    <input type="submit" value="提交" @click="handleSubmit">

</div>

</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            username: '',
            password: '',
            isCheck: false,
            gender: '',
            hobby: [],
        },
        methods: {
            handleSubmit() {
                //假设发送ajax到后端了
                console.log(this.username)
                console.log(this.password)
                console.log(this.isCheck)
                console.log(this.gender)
                console.log(this.hobby)
            }
        },


    })

</script>
</html>